<template>
  <div class="page-header-index-wide">
    <a-row>
      <a-col :span="24">
        <a-col :span="18">
          <a-card
            :loading="loading"
            :bordered="false"
            title="日新增会员统计"
            :style="{ marginTop: '24px', height:'550px' }"
          >
            <a-row>
              <a-col style="margin:0px auto; text-align: center;font-size:15px;font-weight:700;">
                新增会员日统计(总计:
                <span v-text="total"></span>)
              </a-col>
            </a-row>
            <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
          </a-card>
        </a-col>

        <a-col :span="6" style="margin-top:20px;padding-left:10px;">
          <a-form-item>
            <a-date-picker
              style="width:120px;"
              placeholder="开始日期"
              :defaultValue="moment().startOf('month')"
              @change="onChangeStartTime"
            />

            <a-date-picker
              style="width:120px; margin-right:10px;"
              placeholder="结束日期"
              :defaultValue="moment()"
              @change="onChangeEndTime"
            />
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-form-item>
          <table id="table_report" class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th>序号</th>
                <th>注册日期</th>
                <th>日增新会员</th>
              </tr>
            </thead>

            <tbody v-for="(value,key) in visitInfoD" :key="key">
              <tr>
                <td>{{ key+1 }}</td>
                <td>{{ value.type }}</td>
                <td>{{ value.count }}</td>
              </tr>
            </tbody>
          </table>
        </a-col>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import LineChartMultid from '@/components/chart/LineChartMultid'


import {getAction} from '@/api/manage'
import moment from 'moment'

export default {
  name: 'Analysis',
  components: {
    LineChartMultid
  },
  data() {
    this.dateFormat = 'YYYY-MM-DD'
    return {
      loading: true,
      center: null,
      loginfo: {},
      total: '',
      visitFields: ['count'],
      visitInfo: [],
      visitInfoD: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      url: {
        query: '/system/cardCust/queryDataByDay'
      },
      queryParam: {
        //    startDates:moment().subtract(2, 'days').format('YYYY-MM-DD'),
        startDates: moment()
          .startOf('month')
          .format('YYYY-MM-DD'),
        endDates: moment().format('YYYY-MM-DD')
      }
    }
  },
  created() {
    this.initLogInfo()
  },
  methods: {
    moment,
    searchQuery() {
      let startTime = this.queryParam.startDates
      let endTime = this.queryParam.endDates

      if (startTime != '' && endTime != '') {
        if (startTime > endTime) {
          this.$message.error('开始时间不能大于结束时间')
          return
        }
      }

      if (startTime == '' && endTime != '') {
        this.$message.error('请选择开始时间')
        return
      }

      if (startTime != '' && endTime == '') {
        this.$message.error('请选择结束时间')
        return
      }

      this.initLogInfo()
    },
    onChangeStartTime(date, dateString) {
      this.queryParam.startDates = dateString
    },

    onChangeEndTime(date, dateString) {
      this.queryParam.endDates = dateString
    },
    initLogInfo() {
      getAction(this.url.query, this.queryParam).then(res => {
        if (res.code == 200 || res.success) {
          if (res.data) {
            this.loading = false
            this.visitInfo = res.data.list
            this.total = res.data.totalAll
            this.visitInfoD = res.data.listD
          } else if (res.result) {
            this.loading = false
            this.visitInfo = res.result.list
            this.total = res.result.totalAll
            this.visitInfoD = res.result.listD
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

.table th,
.table td {
  padding: 8px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #ddd;
}

.table {
  width: 240px;
  margin-bottom: 20px;
}
</style>